<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>留言板</title>

    <!--semantic-ui-->
    <link rel="stylesheet"  th:href="@{/css/file.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link th:href="@{/css/semantic.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/mian.css}">
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <style>
        body{
            background-image: url("/images/Message_1.jpg");
            height: 100%;
            width: 100%;
            background-size: cover;
            position: absolute;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="ui container">
    <div class="ui segment" style="height: 350px; overflow-y:scroll">
        <div class="ui comments">
            <h3 class="ui blue dividing header">我和[[${others.getUsername()}]]的留言板</h3>
            <div class="comment"  th:each="message:${messages}">
                <a class="avatar">
                     <img th:src="@{'/show/'+${message.getSender_id()}}">
                </a>
                <div class="content">
                    <a class="author" th:text="${message.getSender_name()}"></a>
                    <div class="metadata">
                        <span class="date" th:text="${#dates.format(message.getCreatetime(),'yyyy年MM月dd日 HH:mm')}"></span>
                        <span th:if="${message.getSender_id()==session.loginuser.getId()}"><a th:href="@{'/tea/message/delete/'+${message.getId()}+'/'+${others.getId()}}">删除</a></span>
                    </div>
                    <div class="text" th:text="${message.getContent()}">
                    </div>
                    <a th:if="${not #strings.isEmpty(message.getMy_file())}" target="_blank" th:href="@{'https://wk2020.oss-cn-shenzhen.aliyuncs.com/'+${message.getMy_file()}}"><i class="layui-icon layui-icon-file"></i>附件</a>
                </div>
            </div>
        </div>
    </div>

    <form class="ui reply form" method="post" th:action="@{/tea/message/submit}" enctype="multipart/form-data">
        <input type="hidden" name="sender_name" th:value="${session.loginuser.getUsername()}">
        <input type="hidden" name="sender_id" th:value="${session.loginuser.getId()}">
        <input type="hidden" name="receiver_id" th:value="${others.getId()}">
        <input type="hidden" name="receiver_name" th:value="${others.getUsername()}">
        <div class="layui-input-inline">
            <a href="javascript:;" class="file">添加附件
                <input type="file" name="msg_file"  autocomplete="off" >
            </a>
        </div>
        <div class="field">
            <textarea name="content" style="height: 50px" placeholder="有什么想留言的吗"></textarea>
        </div>
        <button class="ui blue labeled submit icon button" type="submit" id="buttonsubmit">
            <i class="send icon" > </i>
            发送
        </button>
    </form>

</div>
</body>
<script>
    $(document).ready(function () {
        $('#buttonsubmit').click(function () {
            var ii = layer.load();
        })
    })
</script>
</html>